<template>
	<el-container>
		<el-aside class="nopadding" width="220px">
			<el-tree ref="category" class="menu" @node-click="categoryNode" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false" default-expand-all style="padding: 10px">
			</el-tree>
		</el-aside>
		<el-container>
			<el-main class="nopadding">
				<el-container>
					<el-header>
						<div class="left-panel">
							<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
						<div class="right-panel">
							<div class="right-panel-search">
								<el-input v-model="search.name" placeholder="账号 / 姓名 / 手机号" clearable></el-input>
								<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							</div>
						</div>
					</el-header>
					<el-header style="height:150px;">
						<jd-echarts height="100%" :option="logsChartOption"></jd-echarts>
					</el-header>
					<el-main class="nopadding">
						<jdTable ref="table" v-if="tableModel == 'system'" :apiObj="apiObj" :params="param" stripe highlightCurrentRow @row-click="rowClick">
							<el-table-column label="状态" prop="status" width="60" align="center">
								<template #default="scope">
									<el-icon v-if="scope.row.status==0" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
									<el-icon v-if="scope.row.status==1" style="color: #f56c6c;"><el-icon-circle-close-filled /></el-icon>
								</template>
							</el-table-column>
							<el-table-column label="日志号" prop="operId" width="180"></el-table-column>
							<el-table-column label="日志名" prop="title" width="150"></el-table-column>
							<el-table-column label="请求接口" prop="operUrl" width="200"></el-table-column>
							<el-table-column label="请求方法" prop="requestMethod" width="150" align="center"></el-table-column>
							<el-table-column label="操作方法" prop="operatorType" width="150">
								<template #default="scope">
									<DictTag :options="Dict_LogType" :value="scope.row.operatorType" ></DictTag>
								</template>
							</el-table-column>
							<el-table-column label="用户" prop="operName" width="150"></el-table-column>
							<el-table-column label="客户端IP" prop="operIp" width="150"></el-table-column>
							<el-table-column label="客户端地址" prop="operLocation" width="150"></el-table-column>
							<el-table-column label="日志时间" prop="operTime" width="180" fixed="right"></el-table-column>
						</jdTable>
						<jdTable ref="table" v-if="tableModel == 'user'" :apiObj="userLoginObj"  stripe highlightCurrentRow @row-click="rowClick">
							<el-table-column label="用户账号" prop="userName" width="180"></el-table-column>
							<el-table-column label="状态" prop="status" width="150">
								<template #default="scope">
									<DictTag :options="Dict_LoginStatus" :value="scope.row.status" ></DictTag>
								</template>
							</el-table-column>
							<el-table-column label="请求地址" prop="ipaddr" width="200"></el-table-column>
							<el-table-column label="描述" prop="msg" width="150" align="center"></el-table-column>
							<el-table-column label="访问时间" prop="accessTime" width="180" fixed="right"></el-table-column>
						</jdTable>
						<jdTable ref="table" v-if="tableModel == 'taskLog'" :apiObj="taskLogObj"  stripe highlightCurrentRow @row-click="rowClick">
							<el-table-column label="状态" prop="status" width="60" align="center">
								<template #default="scope">
									<el-icon v-if="scope.row.status==0" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
									<el-icon v-if="scope.row.status==1" style="color: #f56c6c;"><el-icon-circle-close-filled /></el-icon>
								</template>
							</el-table-column>
							<el-table-column label="日志号" prop="operId" width="180"></el-table-column>
							<el-table-column label="日志名" prop="title" width="150"></el-table-column>
							<el-table-column label="请求接口" prop="operUrl" width="200"></el-table-column>
							<el-table-column label="请求方法" prop="requestMethod" width="150" align="center">
								<template #default="scope">
									<DictTag :options="Dict_requestStatus" :value="scope.row.requestMethod" ></DictTag>
								</template>
							</el-table-column>
							<el-table-column label="应用名称" prop="appId" width="180"></el-table-column>
							<el-table-column label="请求时间" prop="operTime" width="180"></el-table-column>
						</jdTable>
					</el-main>
				</el-container>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
		<info ref="info"></info>
	</el-drawer>
</template>

<script>
	import info from './info'
	import jdEcharts from '@/components/jdEcharts'

	export default {
		name: 'log',
		components: {
			info,
			jdEcharts
		},
		data() {
			return {
				infoDrawer: false,
				param:{},
				tableModel:'system',
				logsChartOption: {
					color: ['#409eff','#e6a23c','#f56c6c'],
					grid: {
						top: '0px',
						left: '10px',
						right: '40px',
						bottom: '0px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2023-02-24', '2023-02-25', '2023-02-26', '2023-02-27', '2023-02-28', '2023-03-01', '2023-03-02', '2023-03-03', '2023-03-04', '2023-03-05', '2023-03-06', '2023-03-07', '2023-03-08', '2023-03-09', '2023-03-10']
					},
					yAxis: {
						show: false,
						type: 'value'
					},
					series: [{
						name:"POST",
						data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 70, 110],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					},
					{
						name:"GET",
						data: [15, 26, 7, 12, 13, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					},
					{
						name:"PUT",
						data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					},
					{
						name:"DELETE",
						data: [20, 2, 7, 23, 4, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					},

					]
				},
				category: [
					{
						label: '系统日志',
						children: [
							{label: 'POST',value:'POST',module:'system'},
							{label: 'PUT',value:'PUT',module:'system'},
							{label: 'DELETE',value:'DELETE',module:'system'},
							{label: 'GET',value:'GET',module:'system'},
						]
					},
					{
						label: '应用日志',
						children: [
							{label: '应用发布',value:'1',module:'app'},
							{label: '表单日志',value:'2',module:'app'},
							{label: '接口日志',value:'3',module:'taskLog'},
						]
					},
					{
						label: '用户日志',
						children: [
							{label: '账号登录',value:'1',module:'user'},
							{label: '操作记录',value:'2',module:'user'},
							{label: '删除日志',value:'3',module:'user'}
						]
					}
				],
				date: [],
				apiObj: this.$API.system.logs.list,
				userLoginObj:this.$API.system.logs.loginList,
				taskLogObj:this.$API.system.logs.taskLogList,
				search: {
					keyword: ""
				},
				logsData: [],
				Dict_LogType: [],
				Dict_LoginStatus:[],
				Dict_requestStatus:[]
			}
		},
		mounted(){
			this.getDict();
		},
		methods: {
			async getDict(){
				this.Dict_LogType = await this.Dict.get("sys_oper_type");
				this.Dict_LoginStatus = await this.Dict.get("sys_common_status");
				this.Dict_requestStatus = await this.Dict.get("app_request_type");
			},
			upsearch(){

			},
			rowClick(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			},
			categoryNode(env){
				this.tableModel = env.module;
				if (env.module == 'system'){
					this.param.requestMethod = env.value
					this.$refs.table.refresh()
				}
				if (env.module == 'taskLog'){
					this.tableModel='taskLog'
				}
			}
		}
	}
</script>

<style>
.el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: #ebf5ff !important;
   cursor: pointer;
}
</style>
